<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex" justify="space-between" style="margin-bottom: 10px">
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="$router.push('/tiku_shiti')"
            >新增试题</el-button
          >
        </el-row>
        <el-form
          :model="formData"
          :rules="formRules"
          ref="form"
          label-width="80px"
          inline
        >
          <el-form-item label="学科">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 170px"
              v-model="formData.subjectID"
              @change="chang"
            >
              <el-option
                :label="item.subjectName"
                :value="item.id"
                v-for="item in subjectList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 170px"
              v-model="formData.catalogID"
              @focus="getDirectory"
            >
              <el-option
                :label="item.directoryName"
                :value="item.id"
                v-for="item in directorysList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 170px"
              v-model="formData.tags"
              @focus="getTag"
            >
              <el-option
                :label="item.tagName"
                :value="item.id"
                v-for="item in TagList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              size="small"
              style="width: 170px"
              v-model="formData.keyword"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 170px"
              v-model="formData.questionType"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in questionTypeList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 170px"
              v-model="formData.difficulty"
            >
              <el-option
                :label="item.value"
                :value="item.id"
                v-for="item in difficultyList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 170px"
              v-model="formData.direction"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item in directionList"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 170px"
              v-model="formData.creatorID"
            >
              <el-option
                :label="item.username"
                :value="item.id"
                v-for="item in userList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input
              size="small"
              style="width: 170px"
              v-model="formData.remarks"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input
              size="small"
              style="width: 170px"
              v-model="formData.shortName"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 90px; margin-right: 10px"
              v-model="formData.province"
              @change="changeFn"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 90px"
              v-model="formData.city"
            >
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 110px">
            <el-button size="small" @click="reset">清除</el-button>
            <el-button size="small" type="primary" @click="Search"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-alert :title="`数据一共${counts}条`" type="info" show-icon>
        </el-alert>
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="{ row }">
              <span>{{ row.questionType | QuestionType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="200">
            <template slot-scope="{ row }">
              <span>{{ row.addDate | DataTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="{ row }">
              <span>{{ row.difficulty | Difficulty }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100">
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="{ row }">
              <el-button
                size="small"
                type="primary"
                plain
                circle
                icon="el-icon-view"
                @click="Views(row.id)"
              ></el-button>
              <el-button
                size="small"
                type="success"
                plain
                circle
                icon="el-icon-edit"
                @click="$router.push(`/tiku_shiti?id=${row.id}`)"
              ></el-button>
              <el-button
                size="small"
                type="danger"
                plain
                circle
                icon="el-icon-delete"
                @click="del(row.id)"
              ></el-button>
              <el-button
                size="small"
                type="warning"
                plain
                circle
                icon="el-icon-star-off"
                @click="addChoiceState(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.page"
            :page-sizes="[5, 8, 10, 12]"
            :page-size="queryData.pagesize"
            background
            layout="prev, pager, next,sizes, jumper"
            :total="counts"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <Problem ref="Problem" />
    </div>
  </div>
</template>

<script>
import Problem from "@/views/tiku/base/Problem.vue";
import dayjs from "dayjs";
import { provinces, citys } from "@/api/citys";
import {
  getQuestions,
  getUsers,
  getSubjects,
  getTags,
  getDirectorys,
  delQuestions,
  ChoiceState,
  getQuestionsinfo,
} from "@/api/question";
export default {
  name: "Base",
  data() {
    return {
      queryData: {
        page: 1, //当前页数
        pagesize: 5, //页尺寸
      },
      provincesList: provinces(), // 城市
      citysList: [],
      formData: {
        page: 1, //当前页数
        pagesize: 5, //页尺寸
        subjectID: "", //学科
        difficulty: "", //难度
        questionType: "", //试题类型
        tags: "", //标签名称
        province: "", //企业所在地省份
        city: "", //企业所在城市
        keyword: "", //关键字
        remarks: "", //题目备注
        shortName: "", //企业简称
        direction: "", //方向
        creatorID: "", //录入人
        catalogID: "", //目录
      },
      formRules: {},
      tableData: [],
      subjectList: [], //学科列表
      userList: [], //录入人
      TagList: [], //标签
      counts: 0,
      directorysList: [], //目录列表
      questionTypeList: [
        { id: "1", name: "单选" },
        { id: "2", name: "多选" },
        { id: "3", name: "简答" },
      ],
      difficultyList: [
        { id: "1", value: "简单" },
        { id: "2", value: "一般" },
        { id: "3", value: "困难" },
      ],
      directionList: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他",
      ],
    };
  },
  components: {
    Problem,
  },
  created() {
    this.initData();
  },
  methods: {
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.queryData.page = val;
      this.initData();
    },
    changeFn() {
      // 获取地区赋值给本地
      this.citysList = citys(this.formData.province);
    },
    chang() {
      this.formData.catalogID = "";
      this.formData.tags = "";
    },
    async initData() {
      //题型
      const { items, counts } = await getQuestions(this.queryData);
      this.tableData = items;
      this.counts = counts;
      //学科
      const res = await getSubjects({ page: 1, pagesize: 100 });
      this.subjectList = res.items;
      //录入人
      const res1 = await getUsers({ page: 1, pagesize: 100 });
      this.userList = res1.list;
    },
    async getTag() {
      //标签
      const res2 = await getTags({
        page: 1,
        pagesize: 100,
        subjectID: this.formData.subjectID,
      });
      this.TagList = res2.items;
    },
    async getDirectory() {
      //目录
      const res3 = await getDirectorys({
        page: 1,
        pagesize: 100,
        subjectID: this.formData.subjectID,
      });
      this.directorysList = res3.items;
      //console.log(res3);
    },
    reset() {
      this.formData = {};
      this.initData();
    },
    async Search() {
      const res = await getQuestions(this.formData);
      this.tableData = res.items;
      this.counts = res.counts;
      console.log(res);
    },
    async del(id) {
      try {
        await this.$confirm("此操作将永久删除该题目, 是否继续?", {
          type: "warning",
        });
      } catch (error) {
        this.$message("已取消删除");
        return console.log(error);
      }
      await delQuestions(id);
      this.$message.success("删除成功");
      if (this.queryData.page !== 1 && this.tableData.length === 1) {
        this.queryData.page--;
      }
      this.initData();
    },
    async addChoiceState(id) {
      try {
        await this.$confirm("此操作将该题目加入精选, 是否继续?", {
          type: "info",
        });
      } catch (error) {
        this.$message("已取消添加精选题库");
        return console.log(error);
      }
      await ChoiceState(id, 1);
      this.$message.success("加入精选成功");
      this.initData();
    },
    async Views(id) {
      const res = await getQuestionsinfo(id);
      this.$refs.Problem.formData = res;
      this.$refs.Problem.type = res.options;
      const Radios = res.options.find((ele) => ele.isRight === 1);
      if (Radios) {
        this.$refs.Problem.show = Radios.id;
      } else {
        this.$refs.Problem.show = "";
      }
      //console.log(res);
      const Checks = [];
      res.options.forEach((item) => {
        if (item.isRight === 1) Checks.push(item.isRight);
      });
      if (Checks.length === 0) {
        this.$refs.Problem.checkShow = [];
      } else {
        this.$refs.Problem.checkShow = Checks;
      }

      this.$refs.Problem.Showdialog = true;
    },
    // async edit(id) {
    //   const res = await getQuestionsinfo(id);
    //   console.log(res);
    // },
  },
  filters: {
    //题型
    QuestionType(val) {
      if (val === "1") {
        return "单选";
      }
      if (val === "2") {
        return "多选";
      }
      if (val === "3") {
        return "简答";
      }
    },
    //难度
    Difficulty(val) {
      if (val === "1") {
        return "简单";
      }
      if (val === "2") {
        return "一般";
      }
      if (val === "3") {
        return "困难";
      }
    },
    //时间
    DataTime(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 16px;
  }
  &-text {
    font-size: 30px;
    // line-height: 46px;
  }
}
.el-alert--info.is-light {
  height: 38px;
  margin-bottom: 20px;
}
::v-deep .el-alert__title {
  line-height: 4;
}
::v-deep .el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
::v-deep .el-table th {
  background-color: #fafafa;
}
.el-button--small.is-circle {
  padding: 10px;
}
::v-deep .el-dialog__header {
  background: #409eff;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
